<!DOCTYPE html>
<!-- saved from url=(0058)https://foreverz133.github.io/demos/single/input-file.html -->
<html class="mobile"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<meta http-equiv="Content-Type" content="text/html">
<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">
<meta name="renderer" content="webkit">
<meta http-equiv="Cache-Control" content="no-siteapp">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="format-detection" content="telephone=no">
<title>input[file] 手机拍照功能</title>
<!--[if lt IE 9]><script>alert('您的浏览器版本过低，请更新本版本浏览器，或更换为诸如谷歌浏览器的现代浏览器')</script><![endif]-->
<style>
.copyright {
    position: fixed;
    z-index: 9999;
    bottom: 0;
    left: 0; right: 0;
    padding: .5rem 1rem;
    background: #fff;
    box-shadow: 0 0 1rem rgba(0,0,0,.2);
}
.body {
    padding-bottom: 5em;
}
</style>
</head>

<body>
<div class="body">
    <section class="part">
        <h2>普通版（预览图在最底部）</h2>
        <p>部分手机选择相册没有拍照这个选项</p>
        <input type="file" class="file1">
    </section>
    <section class="part">
        <h2>accept="image/*" 版</h2>
        <p>有拍照这个选项，但不支持 FileReader，只得用 window.URL，"blob:" 类型的 url 无法在其他页面查看，且在 PC 端相比普通版打开选择界面速度要慢很多</p>
        <input type="file" class="file2" accept="image/* capture=camera">
    </section>
    <section class="part">
        <h3>微信版(需要微信和后端支持，所以还是直接截图算了)</h3>
        <img src="./input[file] 手机拍照功能_files/input-file.png">
    </section>
    <img src="https://foreverz133.github.io/demos/single/input-file.html" class="preview" width="100%">
    <div class="url"></div>
</div>
<div class="copyright">
    本案例由张永恒<alias></alias>实现，<br>
    联系我可通过 <a href="https://github.com/foreverZ133" target="_blank">github</a> / 
    <a href="https://home.cnblogs.com/u/foreverZ/" target="_blank">cnblog</a><br>
    或者 E-mail: <a href="mailto:617754841@qq.com">617754841@qq.com</a>
</div>
<script>
var view = document.querySelector('.preview');
var $url = document.querySelector('.url');
document.querySelector('.file1').onchange = chooseImage;
document.querySelector('.file2').onchange = chooseImage;

function chooseImage(e) {
    var files = e.target.files;
    if (files && files.length > 0) {
        var file = files[0];
        try {
            var URL = window.URL || window.webkitURL;
            var imgURL = URL.createObjectURL(file);
            view.src = imgURL;
            $url.innerHTML = imgURL;
            view.onload = function() {
                URL.revokeObjectURL(imgURL);
            };
        } catch(error) {
            console.log(error)
            try {
                var fileReader = new FileReader();
                fileReader.onload = function (event) {
                    view.src = event.target.result;
                    $url.innerHTML = imgURL;
                };
                fileReader.readAsDataURL(file);
            } catch(err) {
                console.log(err);
            }
        }
    }
}
</script>

<div style="position: static; display: none; width: 0px; height: 0px; border: none; padding: 0px; margin: 0px;"><div id="trans-tooltip"><div id="tip-left-top" style="background: url(&quot;chrome-extension://ikkbfngojljohpekonpldkamedehakni/imgs/map/tip-left-top.png&quot;);"></div><div id="tip-top" style="background: url(&quot;chrome-extension://ikkbfngojljohpekonpldkamedehakni/imgs/map/tip-top.png&quot;) repeat-x;"></div><div id="tip-right-top" style="background: url(&quot;chrome-extension://ikkbfngojljohpekonpldkamedehakni/imgs/map/tip-right-top.png&quot;);"></div><div id="tip-right" style="background: url(&quot;chrome-extension://ikkbfngojljohpekonpldkamedehakni/imgs/map/tip-right.png&quot;) repeat-y;"></div><div id="tip-right-bottom" style="background: url(&quot;chrome-extension://ikkbfngojljohpekonpldkamedehakni/imgs/map/tip-right-bottom.png&quot;);"></div><div id="tip-bottom" style="background: url(&quot;chrome-extension://ikkbfngojljohpekonpldkamedehakni/imgs/map/tip-bottom.png&quot;) repeat-x;"></div><div id="tip-left-bottom" style="background: url(&quot;chrome-extension://ikkbfngojljohpekonpldkamedehakni/imgs/map/tip-left-bottom.png&quot;);"></div><div id="tip-left" style="background: url(&quot;chrome-extension://ikkbfngojljohpekonpldkamedehakni/imgs/map/tip-left.png&quot;);"></div><div id="trans-content"></div></div><div id="tip-arrow-bottom" style="background: url(&quot;chrome-extension://ikkbfngojljohpekonpldkamedehakni/imgs/map/tip-arrow-bottom.png&quot;);"></div><div id="tip-arrow-top" style="background: url(&quot;chrome-extension://ikkbfngojljohpekonpldkamedehakni/imgs/map/tip-arrow-top.png&quot;);"></div></div></body></html>